<template>
  <div class="announcement-list-page">
<!--    <div class="header">
      <h2>我的收藏</h2>
    </div>-->
    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 筛选区域 -->
      <el-card class="filter-card" shadow="hover" >
        <div style="display: flex">
          <el-input style="width: 600px" size="medium" placeholder="搜索标题..." v-model="name" class="search-input" clearable></el-input>&nbsp;&nbsp;
          <el-button type="primary" @click="load">查询</el-button>
        </div>
      </el-card>

      <!-- 公告列表 -->
      <el-card class="announcement-list-card" shadow="hover" margin-top="20px">
        <!-- 列表为空状态 -->
        <div v-if="notices.length === 0" class="empty-state">
          <el-empty
              :image-size="200"
              :image="require('@/assets/empty.svg')"
              description="暂无公告通知"
          ></el-empty>
        </div>


        <!-- 公告列表项（非空、非加载状态） -->
        <div v-else class="announcement-list">
          <div
              class="announcement-item"
              v-for="(item, index) in notices"
              :key="index"
              @click="handleViewDetail(item.id)"
          >

            <!-- 公告标题与类型 -->
            <div class="item-header">
              <h3 class="item-title">
                {{ item.name }}
              </h3>
            </div>

            <!-- 公告摘要 -->
            <p class="item-summary">{{ item.descr }}</p>

            <!-- 公告元信息（时间、来源） -->
            <div class="item-meta">
              <span class="meta-time">
                <i class="el-icon-clock"></i>
                {{ item.time }}
              </span>
              <span class="meta-source">
                <i class="el-icon-user"></i>
                {{ users.find(v => v.id == item.userId)?.name }}
              </span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnnouncementListPage',
  data() {
    return {
      // 筛选表单
      users: [],
      name: '',
      // 公告列表数据
      notices: [],
      totalCount: 0, // 总公告数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      loading: false // 加载状态
    }
  },
  created() {
    // 初始化加载公告列表
    this.load()
  },
  methods: {
    // 获取公告列表（模拟接口请求）
    load() {
      this.$request.get('/notice?name=' + this.name).then(res => {
        this.notices = res.data
      })

      this.$request.get("/user/selectAll").then(res => {
        this.users = res.data
      })
    },
    // 查看公告详情（跳转详情页）
    handleViewDetail(id) {
      this.$router.push('/front/noticeDetail?id=' + id)
    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.announcement-list-page {
  width: 1200px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: 10px auto;
}

/* 头部标题样式 */
.header {
  display: flex;                            /* 弹性布局 */
  justify-content: space-between;           /* 主轴方向两端对齐 */
  align-items: center;                      /* 交叉轴方向居中对齐 */
  margin: 10px auto;                      /* 下边距15px */
}

/* 标题文字样式 */
.header h2 {
  margin: 0;                                /* 无外边距 */
  color: #333;                              /* 深灰色文字 */
  font-size: 20px;                          /* 字体大小20px */
}

/* 主体内容 */
.main-content {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  flex: 1;
}

/* 筛选卡片 */
.filter-card {
  background-color: #fff;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  margin-bottom: 20px;
}
.filter-form {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 公告列表卡片 */
.announcement-list-card {
  background-color: #fff;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 10px;
}

/* 空状态 */
.empty-state {
  padding: 60px 0;
  text-align: center;
}

/* 公告列表项 */
.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.announcement-item {
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.announcement-item:hover {
  border-color: #e6f4ff;
  background-color: #f9fafc;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

/* 公告项头部（标题+类型） */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 公告摘要 */
.item-summary {
  font-size: 14px;
  color: #606266;
  margin: 0 0 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制2行显示，超出省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

/* 公告元信息（时间、来源） */
.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}
.meta-time, .meta-source {
  display: flex;
  align-items: center;
}
.meta-time i, .meta-source i {
  margin-right: 5px;
  font-size: 12px;
}

</style>
